<template>
	<view class="wap">
		<navbar :parameter='parameter'></navbar>
		<view class="box form">
			<!-- 姓名 年龄 学历 电话 邮箱 城市 自身优势      -->
			<view class="line acea-row">
				<view class="tit"> 姓名 </view>
				<input type="text" v-model="list.member_name" placeholder="请输入姓名" placeholder-class="psc">
			</view>
			<view class="line acea-row row-between-wrapper">
				<view class="tit"> 性别 </view>
				<u-radio-group placement="row" @change="sex_change" activeColor="#347DFE" v-model="list.sex">
					<u-radio :customStyle="{marginLeft: '8px'}" v-for="(item, index) in sex_list" :key="index"
						:label="item.name" :name="item.name" labelSize="14" labelColor="#000">
					</u-radio>
				</u-radio-group>
			</view>
			<view class="line acea-row">
				<view class="tit"> 年龄 </view>
				<input type="number" v-model="list.age" placeholder="请输入年龄" placeholder-class="psc">
			</view>
			<view class="line acea-row">
				<view class="tit"> 身份证 </view>
				<input type="idcard" v-model="list.idcard" placeholder="请输入身份证号" placeholder-class="psc">
			</view>
			<view class="line acea-row">
				<view class="tit"> 手机号 </view>
				<input type="number" v-model="list.mobile" placeholder="请输入手机号" placeholder-class="psc">
			</view>
			<view class="line acea-row row-between-wrapper">
				<view class="tit"> 就诊人关系 </view>
				<u-radio-group placement="row" @change="relationship_change" activeColor="#347DFE"
					v-model="list.relation">
					<u-radio :customStyle="{marginLeft: '8px'}" v-for="(item, index) in relationship_list" :key="index"
						:label="item.value" :name="item.name" labelSize="14" labelColor="#000">
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="bottom-box">
			<view class="btn-box">
				<view class="btn" @click="submit"> 提交</view>
			</view>
		</view>


		<!-- 提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '添加就诊人',
					'color': false,
				},
				index: '',
				// 性别
				sex_list: [{
					name: '男',
					value: '男',
				}, {
					name: '女',
					value: '女',
				}],
				// 就诊人关系
				relationship_list: [{
					name: '朋友',
					value: '朋友',
				}, {
					name: '亲人',
					value: '亲人',
				}, {
					name: '本人',
					value: '本人',
				}],
				list: {
					member_name: '',
					age: '',
					mobile: '',
					idcard: '',
					relation: '',
					sex: '',
				},

			};
		},
		onLoad(option) {
			if (option.id) {
				this.memberInfo(option.id)
			}
		},
		onShow() {

		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {

		},
		onShareTimeline(res) { //分享到朋友圈

		},
		methods: {
			async memberInfo(id) {
				var that = this;
				const res = await this.$myRequest({
					url: '/api/user/memberInfo',
					data: {
						openid: uni.getStorageSync('openid'),
						id: id
					}
				})
				this.list = res.data.data;
			},
			async addMember() {
				var that = this;
				const res = await this.$myRequest({
					url: '/api/user/addMember',
					data: {
						openid: uni.getStorageSync('openid'),
						member_name: that.list.member_name,
						age: that.list.age,
						mobile: that.list.mobile,
						idcard: that.list.idcard,
						relation: that.list.relation,
						sex: that.list.sex,
					}
				})
				console.log(res)
				if (res.data.status == 200) {
					this.$refs.uToast.show({
						type: 'success',
						message: '提交成功',
						complete() {
							uni.navigateBack();
						}
					})
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: res.data.msg,
					})
				}
			},
			async editMember(id) {
				var that = this;
				const res = await this.$myRequest({
					url: '/api/user/editMember',
					data: {
						openid: uni.getStorageSync('openid'),
						member_name: that.list.member_name,
						age: that.list.age,
						mobile: that.list.mobile,
						idcard: that.list.idcard,
						relation: that.list.relation,
						sex: that.list.sex,
						id: id,
					}
				})
				console.log(res)
				if (res.data.status == 200) {
					this.$refs.uToast.show({
						type: 'success',
						message: '编辑成功',
						complete() {
							uni.navigateBack();
						}
					})
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: res.data.msg,
					})
				}
			},
			relationship_change: function(name) {
				console.log('relation', name);
				this.list.relation = name;
			},
			sex_change: function(name) {
				console.log('sex', name);
				this.list.sex = name;
			},
			submit() {
				console.log(this.list)
				if (this.list.id) {
					console.log('编辑')
					this.editMember(this.list.id);
				} else {
					console.log('添加')
					this.addMember();
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.wap {
		padding: 20rpx;
	}

	.box {
		width: 100%;
		padding: 0 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding-bottom: 30rpx;
	}

	.form .line {
		font-size: 28rpx;
		line-height: 100rpx;
		border-bottom: 1px solid #D9D9DA;

	}

	.form .line .tit {
		color: #000;
		width: 200rpx;
	}

	.form .line input,
	.form .line picker {
		color: #000;
		flex: 1;
		height: 100rpx;
		line-height: 100rpx;
		text-align: right;
	}


	.form .line.picker {
		padding-right: 30rpx;
		position: relative;
	}

	.form .line.picker::after {
		content: "\e61f";
		font-family: "iconfont";
		display: block;
		position: absolute;
		font-size: 24rpx;
		color: #b4b4b4;
		top: 0;
		right: 0rpx;
		line-height: 100rpx;
	}

	.form .line textarea {
		height: 60rpx;
	}

	.bottom-box {
		width: 100%;
		padding-top: 60rpx;
		height: 224rpx;
		z-index: 10;

	}

	.btn-box {
		padding-top: 20rpx;
	}

	.btn-box .btn {
		width: 100%;
		height: 80rpx;
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #347DFE;
		color: #fff;
		font-size: 32rpx;
	}
</style>
